<template>
	<view>
		<scroll-view scroll-y>
			<view class="scroll-content" v-for="(item,index) in mvData" :key="index">
				<view class="content">
					<view class="title">
						<image class="title-img" src="../../static/images/video.png" mode="widthFix" ></image>
						<view class="video-info">{{item.name}}-{{item.artistName}}</view>
					</view>
					<view class="play-count">播放量-{{item.playCount}}</view>
				</view>
				<view class="wrap-cover" @tap="openMv(item.id)">
					<image class="video-cover" :src="item.cover" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getMv
	} from '../../service/songs'
	export default {
		data() {
			return {
				mvData: [],
			}
		},
		onLoad() {
			// 获取mv-30条
			this._getMv()
		},
		methods: {
			// 获取mv
			_getMv() {
				getMv().then(res => {
					this.mvData = res.data
					// console.log(this.mvData)
				})
			},
			// mv跳转
			openMv(id){
				uni.navigateTo({
					url:`/pages/video-play/video-play?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less">
	.scroll-content {
		border-bottom: 1px solid #ddd;
		.content{
			display: flex;
			justify-content: space-between;
			padding: 25rpx;
			.title{
				width: 460rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.title-img{
					width: 50rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}
				.video-info{
					display: inline;
					font-size: 27rpx;
					font-weight: 600;
					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					color: #171f29;
					line-height: 44rpx;
					letter-spacing: 4rpx;
				}
			}
			.play-count{
				line-height: 50rpx;
				border-radius: 22rpx;
				font-size: 22rpx;
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
				color: #333;
				letter-spacing: 4rpx;
				text-align: center;
				box-sizing: border-box;
				font-weight: 700;
			}
		}

		.wrap-cover {
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			.video-cover {
				border-radius: 20rpx;
			}
		}
		
	}
</style>